<template>
  <div class="flow-setting">
    <p class="title"><SvgIcon name="node" :size="14"/>节点操作</p>
    <el-scrollbar class="side-scroll-bar" :style="{height: scrollerHeight}">
    <el-tabs class="tabs" stretch v-model="tabsActive">
      <el-tab-pane name="0">
        <template #label>
          <el-tooltip slot="label" effect="dark" content="节点配置" placement="top">
            <div><SvgIcon name="node" /></div>
          </el-tooltip>
        </template>
        <keep-alive><component :is="propertiesPanel.component"/></keep-alive>
      </el-tab-pane>
      <el-tab-pane name="1">
        <template #label>
          <el-tooltip slot="label" effect="dark" content="数据配置" placement="top">
            <div><SvgIcon name="database" /></div>
          </el-tooltip>
        </template>
        <database></database>
      </el-tab-pane>
    </el-tabs>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import {inject, onMounted, provide, reactive, ref, watch,nextTick} from "vue";
import {addWindowResizeHandler} from "../../../../utils/util";
import nodePanel from "./nodePanel/index.vue"
import SvgIcon from '../../../component/svgIcon/index.vue';


const scrollerHeight = ref("0")
const tabsActive = ref("0")

const modeler: any = inject<any>('modeler_context')
const {propertiesPanel} = modeler

onMounted(() => {
  scrollerHeight.value = window.innerHeight - 48 - 40 + 'px'
  addWindowResizeHandler(() => {
    nextTick(() => {
      scrollerHeight.value = window.innerHeight - 48 - 40 + 'px'
    })
  })
})

</script>
<style scoped lang="scss">

</style>